<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-6
  Time: 上午 08:09
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>小米商城后台管理</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <!-- CSS -->
    <link href="${pageContext.request.contextPath}/other/style/background/map.css" rel="stylesheet"
          type="text/css"/>
    <!-- JQuery -->
    <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
    <!-- JS -->
    <script src="${pageContext.request.contextPath}/other/request/background/gaud.js"></script>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=b75b00d88ea29b565c3ee4715fe0418e&plugin=AMap.Driving"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 500px;">
</div>
<div class="order-information">
    <div class="companies">
        <a class="title">所负责运送的物流公司 : </a><span class="name"></span>
    </div>
    <div class="logistics-information">
        <div class="address">
            <a>收货人 : </a><span class="name"></span>
            <a>电话号码 : </a><span class="phone"></span>
            <a>收货地址 : </a><span class="address-information"></span>
        </div>
        <div class="logistics">
            <div class="logistics-process">
                <img src="http://localhost:8083/resource_packs/images/shipping.png" alt="出库">
                <div>
                    <a>已经从</a><span class="warehouse-address"></span><a>发往</a><span class="source-address"></span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="company-information">
    <span>由中科韬睿2024年 TR03403</span>
</div>
<script>
    let gaud = new Gaud();


    //获取路径
    const queryString = window.location.search;
    const params = new URLSearchParams(queryString);
    //获取路径参数
    const paramsObj = Object.fromEntries(params.entries());
    let logisticsInformation = {
        companiesName: params.get('companiesName'),
        ordersStatus: params.get('ordersStatus'),
        station: {
            longitude: params.get('stationLongitude'),
            latitude: params.get('stationLatitude'),
            deliveryman: params.get('stationDeliveryman'),
            province: params.get('stationProvince'),
            city: params.get('stationCity'),
            district: params.get('stationDistrict'),
            name: params.get('stationName'),
        },
        warehouse: {
            name: params.get('warehouseName'),
            latitude: params.get('warehouseLatitude'),
            longitude: params.get('warehouseLongitude'),
        },
        address: {
            name: params.get('addressName'),
            phone: params.get('addressPhone'),
            province: params.get('addressProvince'),
            city: params.get('addressCity'),
            district: params.get('addressDistrict'),
            fullAddress: params.get('addressFullAddress'),
            latitude: params.get('addressLatitude'),
            longitude: params.get('addressLongitude'),
        }
    }
    if (parseInt(logisticsInformation.ordersStatus) === 6){
        $(".logistics").append(`
        <div class="logistics-process">
        <img src="http://localhost:8083/resource_packs/images/truck.png" alt="发货">
        <div>
        <a>正在从</a><span class="source-address"></span><a>发往</a><span class="transfer-address"></span>
        </div>
        </div>`);
    }else if (parseInt(logisticsInformation.ordersStatus) === 7){
        $(".logistics").append(`
        <div class="logistics-process">
        <img src="http://localhost:8083/resource_packs/images/truck.png" alt="发货">
        <div>
        <a>已从</a><span class="source-address"></span><a>发往</a><span class="transfer-address"></span>
        </div>
        </div>`)
        $(".logistics").append(`
        <div class="logistics-process">
        <img src="http://localhost:8083/resource_packs/images/sorting.png" alt="分拣">
        <div>
        <a>已经在</a><span class="sorting-address"></span><a>分拣完成</a>
        </div>
        </div>`)
    }else if (parseInt(logisticsInformation.ordersStatus) === 8){
        $(".logistics").append(`
        <div class="logistics-process">
        <img src="http://localhost:8083/resource_packs/images/truck.png" alt="发货">
        <div>
        <a>已从</a><span class="source-address"></span><a>发往</a><span class="transfer-address"></span>
        </div>
        </div>`)
        $(".logistics").append(`
        <div class="logistics-process">
        <img src="http://localhost:8083/resource_packs/images/sorting.png" alt="分拣">
        <div>
        <a>已经在</a><span class="sorting-address"></span><a>分拣完成</a>
        </div>
        </div>`)
        $(".logistics").append(`
        <div class="logistics-process">
        <img src="http://localhost:8083/resource_packs/images/sorting.png" alt="分拣">
        <div>
        <a>正在发往</a><span class="consignee-address"></span>
        </div>
        </div>`)
    }else if (parseInt(logisticsInformation.ordersStatus) === 9){
        $(".logistics").append(`
        <div class="logistics-process">
        <img src="http://localhost:8083/resource_packs/images/truck.png" alt="发货">
        <div>
        <a>已从</a><span class="source-address"></span><a>发往</a><span class="transfer-address"></span>
        </div>
        </div>`)
        $(".logistics").append(`
        <div class="logistics-process">
        <img src="http://localhost:8083/resource_packs/images/sorting.png" alt="分拣">
        <div>
        <a>已经在</a><span class="sorting-address"></span><a>分拣完成</a>
        </div>
        </div>`)
        $(".logistics").append(`
        <div class="logistics-process">
        <img src="http://localhost:8083/resource_packs/images/sorting.png" alt="分拣">
        <div>
        <a>已发往</a><span class="consignee-address"></span>
        </div>
        </div>`)
    }

    let map = new AMap.Map('map', {
        center: [logisticsInformation.warehouse.longitude, logisticsInformation.warehouse.latitude],
        // 地图中心点经纬度
        zoom: 7
        // 地图缩放级别
    });
    let sourceLocation = new AMap.Marker({
        position: [logisticsInformation.warehouse.longitude, logisticsInformation.warehouse.latitude],
        // 标记位置经纬度
        title: logisticsInformation.warehouse.name
        // 标记提示文字
    });
    gaud.getAddressByLatLng(logisticsInformation.warehouse.latitude, logisticsInformation.warehouse.longitude)
        .then(address => {
            $(".warehouse-address").text(address)
        })
        .catch(error => {
            console.error(error);
        });

    // 将标记添加到地图上
    sourceLocation.setMap(map);
    let transfer = new AMap.Marker({
        position: [logisticsInformation.station.longitude, logisticsInformation.station.latitude],
        // 标记位置经纬度
        title: logisticsInformation.station.name
        // 标记提示文字
    });
    gaud.getAddressByLatLng(logisticsInformation.station.latitude,logisticsInformation.station.longitude)
        .then(address => {
            $(".sorting-address").text(address)
        })
        .catch(error => {
            console.error(error);
        });
    // 将标记添加到地图上
    transfer.setMap(map);
    let consignee = new AMap.Marker({
        position: [logisticsInformation.address.longitude, logisticsInformation.address.latitude],
        // 标记位置经纬度
        title: logisticsInformation.address.name
        // 标记提示文字
    });
    gaud.getAddressByLatLng(logisticsInformation.address.latitude,logisticsInformation.address.longitude)
        .then(address => {
            $(".consignee-address").text(address)
        })
        .catch(error => {
            console.error(error);
        });
    gaud.getAddressByLatLng(logisticsInformation.station.latitude, logisticsInformation.station.longitude)
        .then(address => {
            $(".transfer-address").text(address)
        })
        .catch(error => {
            console.error(error);
        });

    // 将标记添加到地图上
    consignee.setMap(map);
    console.log(logisticsInformation)
    gaud.getAddressByLatLng(logisticsInformation.warehouse.latitude,logisticsInformation.warehouse.longitude)
        .then(address => {
            $(".source-address").text(address)
        })
        .catch(error => {
            console.error(error);
        });

    // 创建驾车路线规划对象，并设置起点、终点和途经点（可选）
    let driving = new AMap.Driving({
        policy: AMap.DrivingPolicy.LEAST_TIME,
        map: map
    });
    driving.search([
        { keyword: '北京市朝阳区阜通东大街6号' },
        { keyword: '北京市海淀区中关村大街27号' }
    ], function(status, result) {
        if (status === 'complete') {
            console.log('绘制驾车路线成功');
        } else {
            console.error('绘制驾车路线失败');
        }
    });

    $(".companies .name").text(logisticsInformation.companiesName)
    $(".address .name").text(logisticsInformation.address.name)
    $(".address .phone").text(logisticsInformation.address.phone)
    $(".address-information").text(logisticsInformation.address.province+" "+
    logisticsInformation.address.city+" "+logisticsInformation.address.district+" "+logisticsInformation.address.fullAddress)

</script>
</body>
</html>
